<template>
  <page-meta :root-font-size="fontValue + 'px'"></page-meta>
  <view class="content">
    <view>
      <view class="fontchange">显示文字大小</view>
    </view>
    <view style="width: 100%; padding: 0 20rpx">
      <slider :min="10" :max="30" :value="fontValue" @change="sliderChange" :step="1" activeColor="#007AFF" />
      <view class="change-fontsize-box">
        <text style="font-size: 10px"> 小 </text>
        <text style="font-size: 16px"> 标准 </text>
        <text style="font-size: 22px"> 中 </text>
        <text style="font-size: 28px"> 大 </text>
      </view>
    </view>
    <view style="padding: 40rpx 30rpx; width: 100%">
      <!-- <button type="primary" @click="submit">确定</button> -->
      <button class="font-button"  @click="submit">确 定</button>
    </view>
    
    <!-- <view style="max-height: 60vh; overflow: scroll">
      <u-line margin="0.5em 0" />
      <u-cell-group title="测试各情况" :border="false">
        <u-cell title="uview 组件" title-style="font-weight:bold"> </u-cell>
        <view>
          <text style="font-size: 16px; color: #3687ff">u-text 文字（未设置props:size；该情况下，根据uni.$u.config.unit配置的单位（默认px））</text>
          <u-text text="测试文字"></u-text>
        </view>
        <view>
          <text style="font-size: 16px; color: #3687ff">u-text 文字 设置size='16px' (指定单位的字符串px)</text>
          <u-text text="测试文字" size="16px"></u-text>
        </view>
        <view>
          <text style="font-size: 16px; color: #3687ff">u-text 文字 设置size='1rem' (指定单位的字符串rem)</text>
          <u-text text="测试文字" size="1rem"></u-text>
        </view>
        <view>
          <text style="font-size: 16px; color: #3687ff">u-text 文字 设置size='32rpx' (指定单位的字符串rpx)</text>
          <u-text text="测试文字" size="32rpx"></u-text>
        </view>
        <u-line margin="0.5em 0" />
        <view>
          <text style="font-size: 16px; color: #3687ff">u-input 文字（未设置props:size）</text>
          <u-input value="测试文字" placeholder="请输入内容" border="none" clearable />
        </view>

        <u-line margin="0.5em 0" />
        <u-cell title="手写/原生 组件" title-style="font-weight:bold"> </u-cell>
        <view class="flex-col">
          <view>
            <text style="font-size: 16px; color: #3687ff">text 文字（未设置 style font-size）</text>
            <view>
              <text>测试文字</text>
            </view>
          </view>
          <view>
            <text style="font-size: 16px; color: #3687ff">text 文字（设置style font-size = 12px）</text>
            <view>
              <text style="font-size: 12px">测试文字</text>
            </view>
          </view>
          <view>
            <text style="font-size: 16px; color: #3687ff">text 文字（设置style font-size = 1rem）</text>
            <view>
              <text style="font-size: 1rem">测试文字</text>
            </view>
          </view>
          <view>
            <text style="font-size: 16px; color: #3687ff">text 文字（设置style font-size = 24rpx）</text>
            <view>
              <text style="font-size: 24rpx">测试文字</text>
            </view>
          </view>
          <view>
            <text style="font-size: 16px; color: #3687ff">text 文字（设置style tailwindcss : text-sm）</text>
            <view>
              <text class="text-sm">测试文字</text>
            </view>
          </view>
        </view>
      </u-cell-group>
    </view> -->
  </view>
</template>

<script>
export default {
  computed: {},
  data() {
    return {
      fontValue: 16,
    };
  },
  onShow() {
    this.fontValue = this.$store.getters.globalFontSize || 16;
  },
  methods: {
    sliderChange(e) {
      this.fontValue = e.detail.value;
      // #ifdef H5
      // 获取 <html> 元素
      const htmlElement = document.documentElement;

      // 修改 style 属性
      htmlElement.style.fontSize = e.detail.value + "px";
      // #endif
    },
    submit() {
      this.$store.commit("setFontSize", this.fontValue);
      // #ifndef H5
      uni.showToast({
        title: "设置成功,重启应用生效",
        icon: "none",
        duration: 1500,
      });
      // #endif

      /*** 重启 */
      // #ifdef MP-WEIXIN
      wx.restartMiniProgram({
        path: "/pages/login/login",
      });
      // #endif

      // #ifdef APP-PLUS
      plus.runtime.restart();
      // #endif

      // #ifdef H5
      location.reload(); //  reload 则不需要下面的代码，已再main.js中配置
      // // 获取 <html> 元素
      // const htmlElement = document.documentElement;

      // // 修改 style 属性
      // htmlElement.style.fontSize = this.$getGlobalFontSize();
      // uni.showToast({
      //   title: "更新成功",
      //   icon: "none",
      //   duration: 1500,
      // });
      // #endif
    },
  },
};
</script>

<style>
.font-button {
  font-size: 15px;
  line-height: 88rpx;
  padding: 0;
  border-radius: 6rpx;
}

.fontchange {
  /* font-size: 32rpx; */
  margin: 40rpx 0;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 30rpx;
  box-sizing: border-box;
}

.change-fontsize-box {
  margin: 20rpx 36rpx;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

</style>
